<template>
  <div ref="mychart" class="echart-box">stack图表展示</div>
  <!--<div id="testChart" ref="testChart" class="dashboard-text">图表展示</div>-->
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    classify: { // 应用那个类型的图标
      type: String,
      default: ''
    },
    testData: { // 柱状图渲染数据,数据的每一项都是Number
      type: Array,
      default() {
        return []
      }
    },
    index: {
      type: Array,
      default() {
        return []
      }
    },
    lat: { // 文案单位
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // type: this.classify,
      type: 'barHeng,',
      tableData: this.testData,
      stackEchart: [],
      latChoose: this.lat,
      indexChoose: this.index,
      dataArr: []
    }
  },
  created() {
    console.log('create')
    console.log('letchoose', this.index)
    console.log(('indexchoose', this.indexChoose))
    if (this.latChoose.some(e => e === 0)) {
      this.tableData.map((item, index) => {
        if (this.latChoose.some(e => e === 0)) {
          if (this.latChoose.some(e => e === 1)) {
            item.fault.map((items, indexs) => {
              if (this.indexChoose.length === 0) {
                this.stackEchart.push({
                  value: items.index[0].data,
                  name: item.province + items.faultName
                })
              } else {
                this.indexChoose.map((indexItem) => {
                  this.stackEchart.push({
                    value: items.index[indexItem].data,
                    name: item.province + items.faultName + items.index[indexItem].name
                  })
                })
              }
            })
          } else {
            if (this.indexChoose.length === 0) {
              this.stackEchart.push({
                value: item.fault[0].index[0].data,
                name: item.province + item.fault[0].index[0].name
              })
            } else {
              this.indexChoose.map((indexItem) => {
                this.stackEchart.push({
                  value: item.fault[0].index[indexItem].data,
                  name: item.province + item.fault[0].index[indexItem].name
                })
              })
            }
          }
        }
      })
      return
    }

    if (this.latChoose.some(e => e === 1)) {
      this.tableData[0].fault.map((item, index) => {
        if (this.indexChoose.length === 0) {
          this.stackEchart.push({
            value: this.tableData[0].fault[index].index[0].data + this.tableData[1].fault[index].index[0].data + this.tableData[2].fault[index].index[0].data,
            name: item.faultName + item.index[0].name
          })
        } else {
          this.indexChoose.map((indexItem, ind) => {
            this.stackEchart.push({
              value: this.tableData[0].fault[index].index[indexItem].data + this.tableData[1].fault[index].index[indexItem].data + this.tableData[2].fault[index].index[indexItem].data,
              name: item.faultName + item.index[indexItem].name
            })
          })
        }
      })
    }
    console.log('stackEchart', this.stackEchart)
  },
  mounted() {
    const myChart = echarts.init(this.$refs.mychart)
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: this.tableData.map(item => {
            return item.province
          })
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: this.tableData[0].fault[0].index[0].name,
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          data: this.tableData.map(item => {
            return item.fault[0].index[0].data
          })
        },
        {
          name: this.tableData[0].fault[0].index[1].name,
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: this.tableData.map(item => {
            return item.fault[0].index[1].data
          })
        },
        {
          name: this.tableData[0].fault[0].index[2].name,
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: this.tableData.map(item => {
            return item.fault[0].index[2].data
          })
        },
        {
          name: this.tableData[0].fault[0].index[3].name,
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: this.tableData.map(item => {
            return item.fault[0].index[3].data
          })
        }
      ]
    })
  }
}
</script>

<style scoped>
  .echart-box {
    width: 100%;
    height: 300px;
  }

  .echart-barHeng {
    height: 300px;
  }
  .echart-barXiLine {
    height: 300px;
  }
  .echart-barCu {
    margin-top: 30px;
    height: 300px;
  }
  .echart-randar {
    height: 300px;
  }
  .echart-wordCloud {
    height: 300px;
  }
</style>
